<!--
 * @Author: your name
 * @Date: 2020-03-25 10:32:12
 * @LastEditTime: 2020-03-25 10:46:04
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vant示例\test1\src\components\Test2.vue
 -->
<template>
  <div class="hello">
    <van-index-bar class="indexBar" :sticky="false" highlight-color="#AE853A">
      <van-index-anchor v-for="(item,index) in city" :key="index" :index="item.initial">
        <span class="indexWord">{{item.initial}}</span>
        <van-cell
          @click="chooseCity(citem)"
          v-for="(citem,cindex) in item.list"
          :key="cindex"
          :title="citem.name"
        />
      </van-index-anchor>
    </van-index-bar>
  </div>
</template>

<script>
import { Switch, IndexBar, IndexAnchor, Cell } from "vant";
export default {
  components: {
    [Switch.name]: Switch,
    [IndexBar.name]: IndexBar,
    [IndexAnchor.name]: IndexAnchor,
    [Cell.name]: Cell
  },
  data() {
    return {
      city: [
        {
          initial: "A",
          list: [
            {
              code: "0997",
              name: "阿克苏",
              pinyin: "Akesu",
              label: "Akesu0997"
            },
            {
              code: "0837",
              name: "阿坝",
              pinyin: "Aba",
              label: "Aba0837"
            },
            {
              code: "0483",
              name: "阿拉善盟",
              pinyin: "Alashanmeng",
              label: "Alashanmeng0483"
            },
            {
              code: "0906",
              name: "阿勒泰",
              pinyin: "Aletai",
              label: "Aletai0906"
            },
            {
              code: "0897",
              name: "阿里",
              pinyin: "Ali",
              label: "Ali0897"
            },
            {
              code: "0915",
              name: "安康",
              pinyin: "Ankang",
              label: "Ankang0915"
            },
            {
              code: "0556",
              name: "安庆",
              pinyin: "Anqing",
              label: "Anqing0556"
            }
          ]
        },
        {
          initial: "B",
          list: [
 {
            "code": "010", 
            "name": "北京", 
            "pinyin": "Beijing", 
            "label": "Beijing010"
          }, 
          {
            "code": "0436", 
            "name": "白城", 
            "pinyin": "Baicheng", 
            "label": "Baicheng0436"
          }, 
          {
            "code": "0776", 
            "name": "百色", 
            "pinyin": "Baise", 
            "label": "Baise0776"
          }, 
          {
            "code": "0439", 
            "name": "白山", 
            "pinyin": "Baishan", 
            "label": "Baishan0439"
          }, 
          {
            "code": "0943", 
            "name": "白银", 
            "pinyin": "Baiyin", 
            "label": "Baiyin0943"
          }, 
          {
            "code": "0552", 
            "name": "蚌埠", 
            "pinyin": "Bangbu", 
            "label": "Bangbu0552"
          }, 
          {
            "code": "0312", 
            "name": "保定", 
            "pinyin": "Baoding", 
            "label": "Baoding0312"
          }, 
          {
            "code": "0917", 
            "name": "宝鸡", 
            "pinyin": "Baoji", 
            "label": "Baoji0917"
          }, 
          {
            "code": "0875", 
            "name": "保山", 
            "pinyin": "Baoshan", 
            "label": "Baoshan0875"
          }, 
          {
            "code": "0472", 
            "name": "包头", 
            "pinyin": "Baotou", 
            "label": "Baotou0472"
          }, 
          {
            "code": "0478", 
            "name": "巴彦淖尔", 
            "pinyin": "Bayannaoer", 
            "label": "Bayannaoer0478"
          }, 
          {
            "code": "0996", 
            "name": "巴音郭楞", 
            "pinyin": "Bayinguoleng", 
            "label": "Bayinguoleng0996"
          }, 
          {
            "code": "0827", 
            "name": "巴中", 
            "pinyin": "Bazhong", 
            "label": "Bazhong0827"
          }, 
          {
            "code": "0779", 
            "name": "北海", 
            "pinyin": "Beihai", 
            "label": "Beihai0779"
          }, 
          {
            "code": "0414", 
            "name": "本溪", 
            "pinyin": "Benxi", 
            "label": "Benxi0414"
          }, 
          {
            "code": "0857", 
            "name": "毕节", 
            "pinyin": "Bijie", 
            "label": "Bijie0857"
          }, 
          {
            "code": "0543", 
            "name": "滨州", 
            "pinyin": "Binzhou", 
            "label": "Binzhou0543"
          }, 
          {
            "code": "0909", 
            "name": "博尔塔拉", 
            "pinyin": "Boertala", 
            "label": "Boertala0909"
          }, 
          {
            "code": "0558", 
            "name": "亳州", 
            "pinyin": "Bozhou", 
            "label": "Bozhou0558"
          }, 
          {
            "code": "0514", 
            "name": "宝应", 
            "pinyin": "Baoying", 
            "label": "Baoying0514"
          }, 
          {
            "code": "0451", 
            "name": "巴彦", 
            "pinyin": "Bayan", 
            "label": "Bayan0451"
          }, 
          {
            "code": "0515", 
            "name": "滨海", 
            "pinyin": "Binhai", 
            "label": "Binhai0515"
          }, 
          {
            "code": "0451", 
            "name": "宾县", 
            "pinyin": "Binxian", 
            "label": "Binxian0451"
          }, 
          {
            "code": "0771", 
            "name": "宾阳", 
            "pinyin": "Binyang", 
            "label": "Binyang0771"
          }, 
          {
            "code": "023", 
            "name": "璧山", 
            "pinyin": "Bishan", 
            "label": "Bishan023"
          }, 
          {
            "code": "0391", 
            "name": "博爱", 
            "pinyin": "Boai", 
            "label": "Boai0391"
          }, 
          {
            "code": "0752", 
            "name": "博罗", 
            "pinyin": "Boluo", 
            "label": "Boluo0752"
          }, 
          {
            "code": "0543", 
            "name": "博兴", 
            "pinyin": "Boxing", 
            "label": "Boxing0543"
          }
        ]
      }, 
      {
        "initial": "C", 
        "list": [
          {
            "code": "023", 
            "name": "重庆", 
            "pinyin": "Chongqing", 
            "label": "Chongqing023"
          }, 
          {
            "code": "0431", 
            "name": "长春", 
            "pinyin": "Changchun", 
            "label": "Changchun0431"
          }, 
          ]
        }
      ]
    };
  },
  methods: {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
      text-align: left;
}
</style>
